<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>Welcome to FlashSaleSystem</h2><br/>
    <img src="http://127.0.0.1:9602/img/030.jpg" width="400px" height="400px"/>
    <br/>
    <button type="button" @click="findGoodsList">查询所有商品</button>
    <br/>
    <template v-if="goodsInfoList!=null">
        <template v-for="goods in goodsInfoList.data">
            <h1>{{goods.goodsName+"----￥"+goods.goodsPrice}}</h1>
            <template v-if="goods.goodsStatus=='ok'">
                <button type="button">点击购买</button>
            </template>
            <template v-if="goods.goodsStatus=='before'">
                <h3>还没到时间呢</h3>
            </template>
            <template v-if="goods.goodsStatus=='after'">
                <h3>活动已经结束了</h3>
            </template>
        </template>

    </template>

</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script>
    new Vue(
        {
            el:'#app',
            data(){
                return{
                    imgSrc:'',
                    goodsInfoList:null,


                }
            },
            mounted(){
                // axios.get('api/fileShow')
                //     .then(
                //         r=>{
                //             this.imgSrc=r.data;
                //             console.log(r.data)
                //         }
                //     )
                //     .catch(function (error) { // 请求失败处理
                //         console.log(error);
                //     });
            },
            methods:{
                async findGoodsList(){
                    this.goodsInfoList = await axios.get("/goods/getGoodsListByRedis");
                    console.log(this.goodsInfoList);
                    //根据时间判断能不能购买--->显示购买按钮


                }
            }
        }
    )
</script>
</body>
</html>